<style>
  .tab {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;
  }
  .tab > header {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    width: 100%;
    background-color: #ccc;
  }
  .tab > header > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
    border-bottom: none;
    border-top: none;
  }
  .tab > header > span:nth-child(2) {
    width: 100%;
  }
  .tab > header > span:first-child {
    width: 100%;
    border-left: none;
  }
  .tab > header > span:last-child {
    width: 100%;
    border-right: none;
  }
</style>
<div id="root">
  <div class="tab">
    <header>
      <span
        v-for="(value, index) in nav"
        :style="{background:cur===index?'#fff':'',color:cur===index?'#000':''}"
        @mouseenter="cur=index"
        :key="index"
        >{{value}}</span
      >
    </header>
    <article>
      <section v-show="cur===0">
        微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博
      </section>
      <section v-show="cur===1">
        动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态
      </section>
      <section v-show="cur===2">
        新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻
      </section>
    </article>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
  new Vue({
    el: "#root",
    data: {
      cur: 0,
      nav: ["微博", "动态", "新闻"],
    },
  });
</script>
